<template>
	<view class="jsfun-picker" @tap="showPicker">
		<slot></slot>
		<view class="selected">
			<template v-if="selected.length">
				{{ selected.join(',') }}
			</template>
			<template v-else>
				请选择
			</template>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" @tap.stop="closePicker" catchtouchmove="true" v-if="isShow"></view>
		<!-- 多选控件 -->
		<view class="picker" :class="{ pickerShow: isShow }" catchtouchmove="true">
			<!-- 标题 -->
			<view class="title">
				<text class="cancel" @tap.stop="closePicker">取消</text>
				<text>空闲时间</text>
				<text class="ok" @tap.stop="okClick">确定</text>
			</view>
			<!-- 数据列表 -->
			<view class="list" v-if="listArr.length > 0">
				<view v-for="(item, index) in listArrNew" :key="index" @tap="itemClick(item)" :class="{ active: item.select }">{{ item.name }}</view>
			</view>
			<view class="list" v-else>未接收到数据</view>
			<!-- 底部说明 -->
			<view class="mess" v-if="mess">{{ mess }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'jsfun-picker2',
	props: {
		listArr: {
			//数据
			type: Array,
			default() {
				return []
			}
		},
		defaultArr: {
			//默认选中的内容
			type: Array,
			default: []
		},
		type: {
			//多选 单选  multiple single
			type: String,
			default: 'single'
		}

		// disabled: { //是否为禁用状态
		// 	type: [String, Boolean],
		// 	defalut: false
		// },
	},
	data() {
		return {
			listArrNew: {}, //记录选中的内容
			isShow: false
		}
	},
	computed: {
		selected() {
			let arr = this.listArr.map(item => {
				if (this.defaultArr.indexOf(item.id) != -1) return item.name
				else return ''
			})

			arr = arr.filter(s => {
				return s && s.trim()
			})

			return arr
		}
	},
	watch: {
		//这里需要监听默认值的改变，重新初始化
		defaultArr(val) {
			this.initValue()
		}
	},
	mounted() {
		this.initValue()
	},
	methods: {
		showPicker() {
			setTimeout(() => {
				this.isShow = true
			}, 100)
		},
		//关闭
		closePicker() {
			this.isShow = false
			//点遮罩 点取消关闭说明用户不想修改，所以这里对数据进行初始化
			this.initValue()
		},
		//组件数据初始化  进入时、关闭时调用初始化
		initValue() {
			//默认值
			let defaultArr = [...this.defaultArr]

			//将传进来的数组转成对象使用
			var temp = {}
			for (let item in this.listArr) {
				let defalutSelect = false

				if (defaultArr.length > 0 && defaultArr.indexOf(this.listArr[item].id) != -1) {
					defalutSelect = true
				}
				temp[item] = { index: item, name: this.listArr[item].name, value: this.listArr[item].id, select: defalutSelect }
			}
			this.listArrNew = temp
		},
		//选中元素
		itemClick(item) {
			if (!item.value) {
				if (item.select) return
				else {
					item.select = true

					for (let item1 in this.listArrNew) {
						var obj = this.listArrNew[item1]
						if (obj.name != item.name) obj.select = false
					}
					return
				}
			}
			else
			{
				for (let item1 in this.listArrNew) {
					var obj = this.listArrNew[item1]
					if (!obj.value) obj.select = false
				}
			}
			if (item.select) {
				item.select = false
			} else {
				
				item.select = true
			}
			//如果是单选需要清除其选中的项
			if (this.type == 'single') {
				for (let item1 in this.listArrNew) {
					var obj = this.listArrNew[item1]
					if (obj.name != item.name) obj.select = false
				}
			}
		},
		//点击确定
		okClick() {
			let ids = []

			for (let i in this.listArrNew) {
				let obj = this.listArrNew[i]
				if (obj.select) ids.push(obj.value)
			}

			if (!ids.length) {
				uni.showToast({
					title: '请选择你的空闲时间',
					icon: 'none'
				})
				return
			}

			this.$emit('okClick', ids)
			//关闭
			this.closePicker()
		}
	}
}
</script>

<style lang="scss">
.jsfun-picker {
	.selected {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.picker {
		transition: all 0.3s ease;
		transform: translateY(100%);
		&.pickerShow {
			transform: translateY(0);
		}

		position: fixed;
		z-index: 1000;
		right: 0;
		left: 0;
		bottom: 0;
		background: #fff;
		color: #333;

		.title {
			display: flex;
			justify-content: space-between;
			border-bottom: solid 1px #efefef;
			padding: 0upx 20upx;
			line-height: 70upx;
			font-size: 28upx;
			font-weight: bold;
			//确定按钮颜色
			.ok {
				color: #07C160;
			}
		}
		.notice {
			color: #999999;
			text-align: left;
			padding: 20upx 20upx 0 20upx;
		}
		.list {
			padding: 0upx 10upx;
			margin: 20upx 0upx;
			display: flex;
			flex-flow: wrap;
			max-height: 50vh;
			overflow-y: auto;
			//列表元素样式
			view {
				background: #fff;
				text-align: center;
				margin: 10upx;
				padding: 6upx 20upx;
				border-radius: 10upx;
				color: #333;
				box-sizing: border-box;
				border: 1px solid #d5d5d5;
				white-space: nowrap;
				display: inline-block;
				width: calc(calc(100% / 3) - 20upx);
			}
			//列表元素选中的样式
			.active {
				background: #fce9f3;
				color: #07C160;
				border: 1px solid #07C160;
			}
		}
		.mess {
			padding: 0upx 20upx;
			margin-bottom: 20upx;
			text-align: left;
		}
	}
}
</style>
